<%@ page language="java" import="java.util.*,org.apache.struts2.*" pageEncoding="UTF-8"%>
<%@ taglib prefix="s" uri="/struts-tags"   %>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path;
%>
<!DOCTYPE HTML>
<html>
<head>
	<title></title>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<link href="<%=basePath %>/assets/css/dpl-min.css" rel="stylesheet" type="text/css" />
	<link href="<%=basePath %>/assets/css/bui-min.css" rel="stylesheet" type="text/css" />
    <link href="<%=basePath %>/assets/css/page-min.css" rel="stylesheet" type="text/css" />
    <style type="text/css">
    	.form-horizontal{
    		margin-top:20px;
    	}
    	.control-group , .bui-uploader{
    		width:900px;
    		margin:auto;
    	}
    	.bui-uploader-button{
    		margin-top:-40px;
    		margin-left:110px;
    	}
    </style> 
</head>
<body>
	<form id="J_Form" action="<%=basePath %>/SubSort_insert" class="form-horizontal" method="post">
      <div class="control-group">
        <label class="control-label"><s>*</s>子类名称:</label>
        <div class="controls" style="width:80%">
          <input name="name" type="text" class="input-large" data-rules="{required : true}" data-messages="{required:'子类名称不能为空'}">
        </div>
      </div>
      <div class="control-group" >
        <label class="control-label"><s>*</s>子类简介:</label>
        <div class="controls  control-row-auto">
          <textarea name="info"  class="control-row5 input-large"></textarea>
        </div>
      </div>
      <div class="control-group" >
        <label class="control-label"><s>*</s>属于的主类:</label>
        <div class="controls  control-row-auto">
			<select id="select" onchange="getSelectedToRoot_id()" disabled="disabled">
				<option value="0" >请先获取主类</option>
			</select>
        </div>
        <a onclick="getRootSort()" style="margin-left:5px;">获取主类</a>
        <input name="root_id"  type="hidden" value="" data-rules="{required : true}" data-messages="{required:'请选择主类'}" id="root_id"/>
        <span id="select_state" Style="display:none;"></span>
      </div>
      <div class="control-group" >
        <label class="control-label"><s>*</s>上传图片:</label>
        <div class="controls">
          	<input id="img" type="hidden" name="img" value="" data-rules="{required : true}" data-messages="{required:'请上传图片'}">
	      	<div id="J_Uploader">
        </div>
      	</div>
      </div>
      <div class="row actions-bar" id="bottom">       
         <div class="form-actions span13 offset3">
           <button type="submit" class="button button-primary">保存</button>
           <button type="reset" class="button">重置</button>
         </div>
      </div>       
    </form>
</body>
	<script type="text/javascript" src="<%=basePath %>/assets/js/jquery-1.8.1.min.js"></script>
	<script type="text/javascript" src="<%=basePath %>/assets/js/bui.js"></script>
	<script type="text/javascript" src="<%=basePath %>/assets/js/config.js"></script>
    <script type="text/javascript">
		var Form = BUI.Form;
		new Form.Form({
		  srcNode : '#J_Form'
		}).render();
		BUI.use('bui/uploader',function (Uploader) {
			
			  //带图片预览的主题
			  Uploader.Theme.addTheme('mytheme', {
			    elCls: 'imageViewTheme',
			    queue:{
			      resultTpl: {
			          'default': '<div class="default">{name}1</div>',
			          'success': '<div data-url="{url}" class="success_url"><img src="<%=basePath%>{url}" title="{name}" style="width:100%;height:100%;"></div>',
			          'error': '<div class="error"><span title="{name}">{msg}</span></div>',
			          'progress': '<div class="progress"><div class="bar" style="width:{loadedPercent}%"></div></div>'
			      }
			    }
			  });
			
			//上传图片
		     var uploader = new Uploader.Uploader({
		       render: '#J_Uploader',
		       //指定使用主题
        	   theme: 'mytheme',
        	   //在那个元素前面
		       elBefore : '#bottom',
		       //获取数据地址
		       url: '<%=basePath%>/SubSort_JUpload',
		       //验证文件
		       rules: {
		         //文的类型
		         ext: ['.png,.jpg','文件类型只能为{0}'],
		         //上传的最大个数
		         max: [1, '文件的最大个数不能超过{0}个'],
		         //文件大小的最小值,这个单位是kb
		         minSize: [0, '文件的大小不能小于{0}KB'],
		         //文件大小的最大值,单位也是kb
		         maxSize: [1024, '文件大小不能大于1M']
		       },
		       multiple:false,
		       isSuccess: function(res){
		       		$("#img").attr("value",res.url);
		       		return true;
		       }
		      }).render();
		   });
		  
         
         //获取以选择给Root_id
         function getSelectedToRoot_id(){
         	var res=$("#select option:selected").val();
         	if(res!=0){
         		$("#root_id").val(res);
         	}else{
         		$("#root_id").val("");
         	}
         }
         
         //获取主类函数
         function getRootSort(){
              //先清空
         	  $("#select").empty();
         	  $("#select").append("<option value='0'>请选择主类</option>");
         	  //加载主类
			  $.ajax({
	             type: "GET",
	             url: "<%=basePath%>/RootSort_JGetNameAndId",
	             dataType: "json",
	             beforeSend:function(XMLHttpRequest){
	             	$("#select").attr("disabled","disabled");
	             	$("#select_state").css("dispaly","block");
	             	$("#select_state").append("<a id='loding_temp'>正在加载...</a>");
	             },
	             success: function(data){
	             	if(data.length==0){
	             		$("#loding_temp").remove();
	             		$("#select_state").css("display","block");
	             		$("#select_state").append("<a style='color:red;margin-left:10px;'>主类为空,请先添加主类!</a>");
	             	}else{
		           		for(var i=0;i<data.length;i++){
		           			$("#select").append("<option value ='"+data[i].id+"'>"+data[i].name+"</option>");
		           		}
	           		}
	           		$("#select").removeAttr("disabled");
	             },
	             error:function(XMLHttpRequest, textStatus, errorThrown){
	             		$("#loding_temp").remove();
	             		$("#select_state").css("display","block");
	             		$("#select_state").append("<a style='color:red;margin-left:10px;'>发生错误,请联系管理员!</a>");
	             }
	         });
         }
	</script>
</html>
